import { DownOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, theme, Dropdown, Space } from 'antd';
import React, { useState, useEffect } from 'react';
import style from './app.module.scss'
import { Outlet, useNavigate, Link } from 'react-router-dom'
import { useStore } from "@/store/index"
import MenuBox from '@/components/MenuBox';
import { observer } from 'mobx-react-lite';

const { Header, Content } = Layout;

const App = () => {
  const { authStore, testStore } = useStore()
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigate()
  const [open, setOpen] = useState(false);
  const [breadcrumbItem, setBreadcrumbItem] = useState([])
  const handleMenuClick = (e) => {
    if (e.key === '2') {
      setOpen(false);
      authStore.logout()
      navigate('/login')
    }
  };
  const handleOpenChange = (flag) => {
    setOpen(flag)
  };
  const items = [
    {
      label: '系统配置',
      key: '1',
    },
    {
      label: '退出',
      key: '2',
    }
  ];
  useEffect(() => {
    let arr = []
    let len = testStore.breadcrumbArr.length
    testStore.breadcrumbArr.forEach((item, i) => {
      if (i !== len - 1) {
        arr.push({
          title: <a href={`/home`}>{item}</a>
        })
      } else {
        arr.push({
          title: item
        })
      }
    })
    setBreadcrumbItem(arr);
  }, [testStore.breadcrumbArr])
  return (
    <Layout className={style.layout}>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
        className={style.headerBox}
      >
        <div className={style.headerTitle}> REACT+ANTD查询系统</div>
        <Dropdown
          className={style.loginItem}
          menu={{
            items,
            onClick: handleMenuClick,
          }}
          onOpenChange={handleOpenChange}
          open={open}
        >
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              我已经登陆
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
      </Header>
      <Layout>
        <MenuBox />
        <Layout
          style={{
            padding: '0 24px 24px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
            items={
              // [
              //   {
              //     title: <Link to='/home'>Home</Link>,
              //   },
              //   {
              //     title: `${breadcrumbItem}`,
              //   }
              // ]
              breadcrumbItem
            }
          />
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default observer(App)